<template>
  <div >
    <el-button v-if="buttontype==1" @click="open" type="primary" size="small" round  style="height: 38px; padding: 0 15px !important; line-height: 38px;margin-left: 10px;"  plain >
      任务类型配置
    </el-button>
    <div v-else-if="buttontype==2" @click="open" style="cursor: pointer;color: #409EFF;font-size: 14px;" >
      配置意向标签
    </div>

    <el-button v-else @click="open" type="warning" round style="background-color: #FFB000;"  >
      <div style="display: flex;align-items: center;">
        <img src="../../../../static/img/rwpz.png" style="width: 14px;margin-right: 10px;" alt="">
        任务类型配置
      </div>  
    </el-button>
    <el-dialog
      title="任务类型配置"
      :visible.sync="isshow"
      width="85%"
      :close-on-click-modal="false"
      append-to-body
      >
      <div class="t_top_tips">任务类型及其对应的用户意向标签配置；任务类型：例如催激活、催付款等，用户意向标签：快速记录用户态度，例如同意办理、不同意办理、用户正忙稍后联系、可作为是否二次外呼的依据，意向标签跟随任务类型配置，不同任务类型可选择的用户意向标签不同。</div>
      <div v-loading='loading'>
        <div   v-for="(item,index) in list" :key="index">
          <div style="margin-bottom: 10px;display: flex;justify-content: space-between;">
            <div>
              任务类型{{ index+1 }}<span v-if="index==0" style="font-size: 14px;color: #666666;margin-left: 20px;">在订单管理或生产发货处直接点击拨打的意向标签管理</span>
            </div>
            <div v-if="item.id" @click="deltype(index)" style="color: #409EFF;cursor: pointer;" >删除</div>
          </div>
          <div class="t_tag_box">
            <div class="t_tag_title">
              <div class="t_tag_type">
                <span style="margin-right: 20px;">任务类型</span>
                <el-input :disabled="!index" v-model="item.name" class="t_tag_title_w" size="small" placeholder="请输入内容"></el-input>
              </div>
              
            </div>
            <div class="t_tag_item_box">
              <div style="margin-right: 20px;width: 120px;flex-shrink: 0;flex-grow: 0;">类型所属意向标签</div>
              <div class="t_tag_item"> 
                <div v-for="(item2,index2) in item.tag" :key="index2" class="t_tag_input_box">  
                    <el-input  v-model="item2.name" class="t_tag_input_w" size="small" placeholder="请输入意向标签"></el-input>
                    <el-button size="small" icon="el-icon-delete" @click="deltag(index,index2)" class=" t_close_del" ></el-button>
                </div>
                <el-button @click="addtag(index)" style="margin-bottom: 10px;background-color: #F7F8FA;border-color: #CED3DE;color: #333333;" size="small" type="info" icon="el-icon-plus" >添加标签</el-button>
              </div>
          </div>
          
            
          </div>
        </div>
        <div class="t_add_box">
          <el-button @click="addtype" type="primary" size="small" style="width: 100%;height: 88px;background-color: #F7F7F7;border: 1px dashed #CCCCCC;color: #404040;" plain>+添加类型</el-button>
        </div>
        <div v-if="list.length<2" class="t_no_rwtype">
          <img style="width: 111px;margin-bottom: 30px;" src="../../../../static/img/nonerw.png" alt="">
          当前还未配置任务类型，请添加任务类型
        </div>
        <div style="text-align: right;width: 100%;margin-top: 80px;">
              <el-button type="primary" round @click="restype">取消</el-button>
              <el-button type="danger" style="background-color: #2974FF;" round @click="subtype">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";

  export default {
    components: {
      
      UploadExcelComponent
    },
    name: 'quanyi',
    props:['buttontype'],
    data() {
      return {
        shopid:'',
        isshow:false,
        list:[],
        loading:false

      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      
      
     
    },
    methods: {
      getinfo(){
        var that = this
        this.loading = true
        axios.get('/api/plan-market/call/task/get/class/v2')
        .then(response => {
          if (response.data.msg.code == 0) {
            console.log('分类')
            console.log(response.data.data)
            this.list = response.data.data
            that.loading = false
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      open(){
        this.isshow = true
        this.getinfo()
      },
   
      //删除类型
      deltype(i){
        this.list.splice(i, 1);
      },
      //添加标签
      addtag(i){
        this.list[i].tag.push({id:'',name:''})
      },
      //删除标签
      deltag(i1,i2){
        this.list[i1].tag.splice(i2, 1)
      },
      //添加类型
      addtype(){
        this.list.push({
          id:'',
          name:'',
          tag:[{id:'',name:''}]
        })
      },
      restype(){
        this.isshow = false
      },
      subtype(){
        console.log(this.list)

        for(var x=0;x<this.list.length;x++){
          if(this.list[x].name ==''){
            this.$message.error('任务类型未填写');
            return 
          }
          for(var y=0;y<this.list[x].tag.length;y++){
            if(this.list[x].tag[y] ==''){
              this.$message.error('任务标签未填写');
              return 
            }
          }
        }

       
        let formData = new FormData();
        formData.append('class_info', JSON.stringify(this.list));

        axios.post('/api/plan-market/call/task/set/class/v2',formData)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.isshow = false
            this.$emit('changerwtype')
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>
.t_add_box{
  display: flex;
  align-items: center;
}
.t_tag_title{
  display: flex;
  align-items: center;
  margin-bottom: 20px;

}
.t_tag_item{
  display: flex;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.t_tag_title_w{
  width: 234px;
  
}
.t_tag_input_w{
  width: 300px;
  margin-right: 10px;
}
.t_tag_type{
  display: flex;
  align-items: center;
  margin-right: 10px;
  border-radius: 3px;
}
    
/deep/.t_tag_title_w .el-input__inner{
  background-color: white;
  border: none;
}

/deep/.t_tag_input_w .el-input__inner{
  background-color: white;
  border: none;
}

/deep/.t_tag_input_box el-button{
  border: none;
}
.t_tag_input_box{
  position: relative;
  margin-bottom: 10px;
}
.t_close_del{
  /* position: absolute;
  top: 9px;
  right: 17px; */
  cursor: pointer;
  /* display: none; */
  margin-right: 30px;
  border: none;
}
/* .t_tag_input_box:hover .t_close_del{
  display: block;
} */
.t_top_tips{
  background-color: #E8F6FF;
  padding: 10px 20px ;
  border-radius: 10px;
  margin-bottom: 34px;
  font-size: 12px;
  color: #757575;
}
.t_tag_box{
  background-color: #F7F7F7;
  padding: 40px 30px 20px 30px;
  border-radius: 10px;
  margin-bottom: 30px;
}
.t_tag_item_box{
  display: flex;
}
.t_no_rwtype{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999999;
  margin-top: 100px;
}
</style>
